<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico"
        type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
<div class="main">
  <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
  <div class="nav-tabs">
    <ul id="tabs" class="dib-box">
      <li class="dib active"><span>Unicode</span></li>
      <li class="dib"><span>Font class</span></li>
      <li class="dib"><span>Symbol</span></li>
    </ul>

    <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1410928" target="_blank"
       class="nav-more">查看项目</a>

  </div>
  <div class="tab-container">
    <div class="content unicode" style="display: block;">
      <ul class="icon_lists dib-box">

        <li class="dib">
          <span class="icon iconfont">&#xe630;</span>
          <div class="name">筛选</div>
          <div class="code-name">&amp;#xe630;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe67f;</span>
          <div class="name">i</div>
          <div class="code-name">&amp;#xe67f;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe680;</span>
          <div class="name">i</div>
          <div class="code-name">&amp;#xe680;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe7a6;</span>
          <div class="name">搜索</div>
          <div class="code-name">&amp;#xe7a6;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe6ba;</span>
          <div class="name">笔记本</div>
          <div class="code-name">&amp;#xe6ba;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe641;</span>
          <div class="name">加</div>
          <div class="code-name">&amp;#xe641;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe621;</span>
          <div class="name">菜单</div>
          <div class="code-name">&amp;#xe621;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe696;</span>
          <div class="name">我的</div>
          <div class="code-name">&amp;#xe696;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe60e;</span>
          <div class="name">分享</div>
          <div class="code-name">&amp;#xe60e;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe7ca;</span>
          <div class="name">标签</div>
          <div class="code-name">&amp;#xe7ca;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe601;</span>
          <div class="name">笔</div>
          <div class="code-name">&amp;#xe601;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe604;</span>
          <div class="name">播放</div>
          <div class="code-name">&amp;#xe604;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe69c;</span>
          <div class="name">有道云笔记</div>
          <div class="code-name">&amp;#xe69c;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe683;</span>
          <div class="name">笔记</div>
          <div class="code-name">&amp;#xe683;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe617;</span>
          <div class="name">上一页</div>
          <div class="code-name">&amp;#xe617;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe66a;</span>
          <div class="name">文档</div>
          <div class="code-name">&amp;#xe66a;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe62f;</span>
          <div class="name">分享</div>
          <div class="code-name">&amp;#xe62f;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe6bb;</span>
          <div class="name">操作-翻译</div>
          <div class="code-name">&amp;#xe6bb;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe7af;</span>
          <div class="name">邀请好友</div>
          <div class="code-name">&amp;#xe7af;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe633;</span>
          <div class="name">动态分享</div>
          <div class="code-name">&amp;#xe633;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe609;</span>
          <div class="name">返回</div>
          <div class="code-name">&amp;#xe609;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe67c;</span>
          <div class="name">文件夹2</div>
          <div class="code-name">&amp;#xe67c;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe703;</span>
          <div class="name">Markdown</div>
          <div class="code-name">&amp;#xe703;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe605;</span>
          <div class="name">笔</div>
          <div class="code-name">&amp;#xe605;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe650;</span>
          <div class="name">文件夹</div>
          <div class="code-name">&amp;#xe650;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe61c;</span>
          <div class="name">回收站</div>
          <div class="code-name">&amp;#xe61c;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe7b6;</span>
          <div class="name">标签</div>
          <div class="code-name">&amp;#xe7b6;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe608;</span>
          <div class="name">文件夹</div>
          <div class="code-name">&amp;#xe608;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe64e;</span>
          <div class="name">笔记</div>
          <div class="code-name">&amp;#xe64e;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe710;</span>
          <div class="name">播放</div>
          <div class="code-name">&amp;#xe710;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe66c;</span>
          <div class="name">文件夹-实</div>
          <div class="code-name">&amp;#xe66c;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe637;</span>
          <div class="name">分享-实色</div>
          <div class="code-name">&amp;#xe637;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe648;</span>
          <div class="name">筛选</div>
          <div class="code-name">&amp;#xe648;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe62d;</span>
          <div class="name">笔记</div>
          <div class="code-name">&amp;#xe62d;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe63f;</span>
          <div class="name">招商小程序-邀好友</div>
          <div class="code-name">&amp;#xe63f;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe644;</span>
          <div class="name">会员</div>
          <div class="code-name">&amp;#xe644;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe689;</span>
          <div class="name">文件夹</div>
          <div class="code-name">&amp;#xe689;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe652;</span>
          <div class="name">菜单</div>
          <div class="code-name">&amp;#xe652;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe71d;</span>
          <div class="name">更多</div>
          <div class="code-name">&amp;#xe71d;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xed87;</span>
          <div class="name">icon-markdown</div>
          <div class="code-name">&amp;#xed87;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe622;</span>
          <div class="name">下载</div>
          <div class="code-name">&amp;#xe622;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe606;</span>
          <div class="name">会员</div>
          <div class="code-name">&amp;#xe606;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe7e6;</span>
          <div class="name">53-标签</div>
          <div class="code-name">&amp;#xe7e6;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe602;</span>
          <div class="name">置顶</div>
          <div class="code-name">&amp;#xe602;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe607;</span>
          <div class="name">会员</div>
          <div class="code-name">&amp;#xe607;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe616;</span>
          <div class="name">icon_文件夹</div>
          <div class="code-name">&amp;#xe616;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe649;</span>
          <div class="name">关闭文件夹</div>
          <div class="code-name">&amp;#xe649;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe64a;</span>
          <div class="name">打开文件夹</div>
          <div class="code-name">&amp;#xe64a;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe70b;</span>
          <div class="name">五角星 星型</div>
          <div class="code-name">&amp;#xe70b;</div>
        </li>

        <li class="dib">
          <span class="icon iconfont">&#xe600;</span>
          <div class="name">五角星 星型 收藏</div>
          <div class="code-name">&amp;#xe600;</div>
        </li>

      </ul>
      <div class="article markdown">
        <h2 id="unicode-">Unicode 引用</h2>
        <hr>

        <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
        <ul>
          <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
          <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
          <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
        </ul>
        <blockquote>
          <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
        </blockquote>
        <p>Unicode 使用步骤如下：</p>
        <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
        <pre><code class="language-css"
        >@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
        <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
        <pre><code class="language-css"
        >.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
        <pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
    </div>
    <div class="content font-class">
      <ul class="icon_lists dib-box">

        <li class="dib">
          <span class="icon iconfont icon40"></span>
          <div class="name">
            筛选
          </div>
          <div class="code-name">.icon40
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconi"></span>
          <div class="name">
            i
          </div>
          <div class="code-name">.iconi
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconi1"></span>
          <div class="name">
            i
          </div>
          <div class="code-name">.iconi1
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconsousuo"></span>
          <div class="name">
            搜索
          </div>
          <div class="code-name">.iconsousuo
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconbijiben"></span>
          <div class="name">
            笔记本
          </div>
          <div class="code-name">.iconbijiben
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconjia"></span>
          <div class="name">
            加
          </div>
          <div class="code-name">.iconjia
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconweibiaoti15"></span>
          <div class="name">
            菜单
          </div>
          <div class="code-name">.iconweibiaoti15
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconwode"></span>
          <div class="name">
            我的
          </div>
          <div class="code-name">.iconwode
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconfenxiang"></span>
          <div class="name">
            分享
          </div>
          <div class="code-name">.iconfenxiang
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconbiaoqian"></span>
          <div class="name">
            标签
          </div>
          <div class="code-name">.iconbiaoqian
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconbi"></span>
          <div class="name">
            笔
          </div>
          <div class="code-name">.iconbi
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconbofang"></span>
          <div class="name">
            播放
          </div>
          <div class="code-name">.iconbofang
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconyoudaoyunbiji"></span>
          <div class="name">
            有道云笔记
          </div>
          <div class="code-name">.iconyoudaoyunbiji
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont icon44"></span>
          <div class="name">
            笔记
          </div>
          <div class="code-name">.icon44
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconshangyiye"></span>
          <div class="name">
            上一页
          </div>
          <div class="code-name">.iconshangyiye
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconwendang"></span>
          <div class="name">
            文档
          </div>
          <div class="code-name">.iconwendang
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconfenxiang1"></span>
          <div class="name">
            分享
          </div>
          <div class="code-name">.iconfenxiang1
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconfanyi"></span>
          <div class="name">
            操作-翻译
          </div>
          <div class="code-name">.iconfanyi
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconyaoqinghaoyou"></span>
          <div class="name">
            邀请好友
          </div>
          <div class="code-name">.iconyaoqinghaoyou
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont icondongtaifenxiang"></span>
          <div class="name">
            动态分享
          </div>
          <div class="code-name">.icondongtaifenxiang
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconfanhui"></span>
          <div class="name">
            返回
          </div>
          <div class="code-name">.iconfanhui
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconwenjianjia"></span>
          <div class="name">
            文件夹2
          </div>
          <div class="code-name">.iconwenjianjia
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconMarkdown"></span>
          <div class="name">
            Markdown
          </div>
          <div class="code-name">.iconMarkdown
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconziyuan"></span>
          <div class="name">
            笔
          </div>
          <div class="code-name">.iconziyuan
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconwenjianjia1"></span>
          <div class="name">
            文件夹
          </div>
          <div class="code-name">.iconwenjianjia1
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconhuishouzhan"></span>
          <div class="name">
            回收站
          </div>
          <div class="code-name">.iconhuishouzhan
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconbiaoqian1"></span>
          <div class="name">
            标签
          </div>
          <div class="code-name">.iconbiaoqian1
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconic_folder"></span>
          <div class="name">
            文件夹
          </div>
          <div class="code-name">.iconic_folder
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconbiji"></span>
          <div class="name">
            笔记
          </div>
          <div class="code-name">.iconbiji
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconbofang1"></span>
          <div class="name">
            播放
          </div>
          <div class="code-name">.iconbofang1
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconwenjianjia-shi"></span>
          <div class="name">
            文件夹-实
          </div>
          <div class="code-name">.iconwenjianjia-shi
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconshare-s"></span>
          <div class="name">
            分享-实色
          </div>
          <div class="code-name">.iconshare-s
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconshaixuan"></span>
          <div class="name">
            筛选
          </div>
          <div class="code-name">.iconshaixuan
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconbiji1"></span>
          <div class="name">
            笔记
          </div>
          <div class="code-name">.iconbiji1
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconzhaoshangxiaochengxu-yaohaoyou"></span>
          <div class="name">
            招商小程序-邀好友
          </div>
          <div class="code-name">.iconzhaoshangxiaochengxu-yaohaoyou
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont icontianchongxing-"></span>
          <div class="name">
            会员
          </div>
          <div class="code-name">.icontianchongxing-
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconwenjianjia2"></span>
          <div class="name">
            文件夹
          </div>
          <div class="code-name">.iconwenjianjia2
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconcaidan"></span>
          <div class="name">
            菜单
          </div>
          <div class="code-name">.iconcaidan
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconxiaoxiguanli-quanbux"></span>
          <div class="name">
            更多
          </div>
          <div class="code-name">.iconxiaoxiguanli-quanbux
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconicon-markdown"></span>
          <div class="name">
            icon-markdown
          </div>
          <div class="code-name">.iconicon-markdown
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconxiazai"></span>
          <div class="name">
            下载
          </div>
          <div class="code-name">.iconxiazai
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconhuiyuan"></span>
          <div class="name">
            会员
          </div>
          <div class="code-name">.iconhuiyuan
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont icon-biaoqian"></span>
          <div class="name">
            53-标签
          </div>
          <div class="code-name">.icon-biaoqian
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconzhiding"></span>
          <div class="name">
            置顶
          </div>
          <div class="code-name">.iconzhiding
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconhuiyuan1"></span>
          <div class="name">
            会员
          </div>
          <div class="code-name">.iconhuiyuan1
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconicon_wenjianjia"></span>
          <div class="name">
            icon_文件夹
          </div>
          <div class="code-name">.iconicon_wenjianjia
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconhuabanfuben"></span>
          <div class="name">
            关闭文件夹
          </div>
          <div class="code-name">.iconhuabanfuben
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconhuabanfuben1"></span>
          <div class="name">
            打开文件夹
          </div>
          <div class="code-name">.iconhuabanfuben1
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconchangyongtubiao-xianxingdaochu-zhuanqu-"></span>
          <div class="name">
            五角星 星型
          </div>
          <div class="code-name">.iconchangyongtubiao-xianxingdaochu-zhuanqu-
          </div>
        </li>

        <li class="dib">
          <span class="icon iconfont iconchangyongtubiao-mianxing-"></span>
          <div class="name">
            五角星 星型 收藏
          </div>
          <div class="code-name">.iconchangyongtubiao-mianxing-
          </div>
        </li>

      </ul>
      <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
        <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
    </div>
    <div class="content symbol">
      <ul class="icon_lists dib-box">

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#icon40"></use>
          </svg>
          <div class="name">筛选</div>
          <div class="code-name">#icon40</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconi"></use>
          </svg>
          <div class="name">i</div>
          <div class="code-name">#iconi</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconi1"></use>
          </svg>
          <div class="name">i</div>
          <div class="code-name">#iconi1</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconsousuo"></use>
          </svg>
          <div class="name">搜索</div>
          <div class="code-name">#iconsousuo</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconbijiben"></use>
          </svg>
          <div class="name">笔记本</div>
          <div class="code-name">#iconbijiben</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconjia"></use>
          </svg>
          <div class="name">加</div>
          <div class="code-name">#iconjia</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconweibiaoti15"></use>
          </svg>
          <div class="name">菜单</div>
          <div class="code-name">#iconweibiaoti15</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconwode"></use>
          </svg>
          <div class="name">我的</div>
          <div class="code-name">#iconwode</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconfenxiang"></use>
          </svg>
          <div class="name">分享</div>
          <div class="code-name">#iconfenxiang</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconbiaoqian"></use>
          </svg>
          <div class="name">标签</div>
          <div class="code-name">#iconbiaoqian</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconbi"></use>
          </svg>
          <div class="name">笔</div>
          <div class="code-name">#iconbi</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconbofang"></use>
          </svg>
          <div class="name">播放</div>
          <div class="code-name">#iconbofang</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconyoudaoyunbiji"></use>
          </svg>
          <div class="name">有道云笔记</div>
          <div class="code-name">#iconyoudaoyunbiji</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#icon44"></use>
          </svg>
          <div class="name">笔记</div>
          <div class="code-name">#icon44</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconshangyiye"></use>
          </svg>
          <div class="name">上一页</div>
          <div class="code-name">#iconshangyiye</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconwendang"></use>
          </svg>
          <div class="name">文档</div>
          <div class="code-name">#iconwendang</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconfenxiang1"></use>
          </svg>
          <div class="name">分享</div>
          <div class="code-name">#iconfenxiang1</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconfanyi"></use>
          </svg>
          <div class="name">操作-翻译</div>
          <div class="code-name">#iconfanyi</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconyaoqinghaoyou"></use>
          </svg>
          <div class="name">邀请好友</div>
          <div class="code-name">#iconyaoqinghaoyou</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#icondongtaifenxiang"></use>
          </svg>
          <div class="name">动态分享</div>
          <div class="code-name">#icondongtaifenxiang</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconfanhui"></use>
          </svg>
          <div class="name">返回</div>
          <div class="code-name">#iconfanhui</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconwenjianjia"></use>
          </svg>
          <div class="name">文件夹2</div>
          <div class="code-name">#iconwenjianjia</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconMarkdown"></use>
          </svg>
          <div class="name">Markdown</div>
          <div class="code-name">#iconMarkdown</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconziyuan"></use>
          </svg>
          <div class="name">笔</div>
          <div class="code-name">#iconziyuan</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconwenjianjia1"></use>
          </svg>
          <div class="name">文件夹</div>
          <div class="code-name">#iconwenjianjia1</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconhuishouzhan"></use>
          </svg>
          <div class="name">回收站</div>
          <div class="code-name">#iconhuishouzhan</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconbiaoqian1"></use>
          </svg>
          <div class="name">标签</div>
          <div class="code-name">#iconbiaoqian1</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconic_folder"></use>
          </svg>
          <div class="name">文件夹</div>
          <div class="code-name">#iconic_folder</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconbiji"></use>
          </svg>
          <div class="name">笔记</div>
          <div class="code-name">#iconbiji</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconbofang1"></use>
          </svg>
          <div class="name">播放</div>
          <div class="code-name">#iconbofang1</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconwenjianjia-shi"></use>
          </svg>
          <div class="name">文件夹-实</div>
          <div class="code-name">#iconwenjianjia-shi</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconshare-s"></use>
          </svg>
          <div class="name">分享-实色</div>
          <div class="code-name">#iconshare-s</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconshaixuan"></use>
          </svg>
          <div class="name">筛选</div>
          <div class="code-name">#iconshaixuan</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconbiji1"></use>
          </svg>
          <div class="name">笔记</div>
          <div class="code-name">#iconbiji1</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconzhaoshangxiaochengxu-yaohaoyou"></use>
          </svg>
          <div class="name">招商小程序-邀好友</div>
          <div class="code-name">#iconzhaoshangxiaochengxu-yaohaoyou</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#icontianchongxing-"></use>
          </svg>
          <div class="name">会员</div>
          <div class="code-name">#icontianchongxing-</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconwenjianjia2"></use>
          </svg>
          <div class="name">文件夹</div>
          <div class="code-name">#iconwenjianjia2</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconcaidan"></use>
          </svg>
          <div class="name">菜单</div>
          <div class="code-name">#iconcaidan</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconxiaoxiguanli-quanbux"></use>
          </svg>
          <div class="name">更多</div>
          <div class="code-name">#iconxiaoxiguanli-quanbux</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconicon-markdown"></use>
          </svg>
          <div class="name">icon-markdown</div>
          <div class="code-name">#iconicon-markdown</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconxiazai"></use>
          </svg>
          <div class="name">下载</div>
          <div class="code-name">#iconxiazai</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconhuiyuan"></use>
          </svg>
          <div class="name">会员</div>
          <div class="code-name">#iconhuiyuan</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#icon-biaoqian"></use>
          </svg>
          <div class="name">53-标签</div>
          <div class="code-name">#icon-biaoqian</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconzhiding"></use>
          </svg>
          <div class="name">置顶</div>
          <div class="code-name">#iconzhiding</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconhuiyuan1"></use>
          </svg>
          <div class="name">会员</div>
          <div class="code-name">#iconhuiyuan1</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconicon_wenjianjia"></use>
          </svg>
          <div class="name">icon_文件夹</div>
          <div class="code-name">#iconicon_wenjianjia</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconhuabanfuben"></use>
          </svg>
          <div class="name">关闭文件夹</div>
          <div class="code-name">#iconhuabanfuben</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconhuabanfuben1"></use>
          </svg>
          <div class="name">打开文件夹</div>
          <div class="code-name">#iconhuabanfuben1</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconchangyongtubiao-xianxingdaochu-zhuanqu-"></use>
          </svg>
          <div class="name">五角星 星型</div>
          <div class="code-name">#iconchangyongtubiao-xianxingdaochu-zhuanqu-</div>
        </li>

        <li class="dib">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconchangyongtubiao-mianxing-"></use>
          </svg>
          <div class="name">五角星 星型 收藏</div>
          <div class="code-name">#iconchangyongtubiao-mianxing-</div>
        </li>

      </ul>
      <div class="article markdown">
        <h2 id="symbol-">Symbol 引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
          这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
          <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
          <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
        <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
        <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
        <pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
      </div>
    </div>

  </div>
</div>
<script>
  $(document).ready(function () {
    $('.tab-container .content:first').show()

    $('#tabs li').click(function (e) {
      var tabContent = $('.tab-container .content')
      var index = $(this).index()

      if ($(this).hasClass('active')) {
        return
      } else {
        $('#tabs li').removeClass('active')
        $(this).addClass('active')

        tabContent.hide().eq(index).fadeIn()
      }
    })
  })
</script>
</body>
</html>
